<!DOCTYPE html>
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ title }}</title>

    <meta name="description" content="GPT4Free documentation for GPT4Free Documentation Hub. Complete guides, examples, and API reference for free AI endpoints, code generation, and AI model integration." />
    <meta name="keywords" content="GPT4Free, G4F, AI documentation, free AI API, OpenAI alternative, JavaScript AI client, Python AI library, AI integration, code generation, GPT4Free Documentation Hub" />
    <meta name="author" content="GPT4Free Team" />

    <!-- Open Graph -->
    <meta property="og:type" content="article" />
    <meta property="og:title" content="GPT4Free Documentation Hub" />
    <meta property="og:description" content="GPT4Free documentation for GPT4Free Documentation Hub. Free AI endpoints, examples, and comprehensive guides." />
    <meta property="og:url" content="https://g4f.dev/docs/" />
    <meta property="og:site_name" content="GPT4Free Documentation" />
    <meta property="og:image" content="https://g4f.dev/dist/img/apple-touch-icon.png" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="GPT4Free Documentation Hub | GPT4Free Documentation" />
    <meta name="twitter:description" content="Free AI endpoints and comprehensive documentation for GPT4Free Documentation Hub." />
    <meta name="twitter:image" content="https://g4f.dev/dist/img/apple-touch-icon.png" />

    <!-- Canonical -->
    <link rel="canonical" href="https://g4f.dev/docs/" />

    <link rel="apple-touch-icon" sizes="180x180" href="/dist/img/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/dist/img/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/dist/img/favicon-16x16.png" />
    <link rel="manifest" href="/dist/img/site.webmanifest" />

    <!-- GitHub Primer CSS & styles -->
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-74231a1f3bbb.css" />
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-8a995f0bacd4.css" />
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.css" />
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-b8b91660c29d.css" />
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-205098e9fedd.css" />
    <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-177d21388df8.css" />

    
    <style>
        :root {
            --accent: #8b3dff;
            --background: #16101b;
            --text-primary: #ddd;
            --text-secondary: #9b7dff;
            --card-bg: #1e152e;
            --border-color: #333;
            --hover-color: #a67eff;
        }

        body {
            margin: 0;
            padding: 0;
            background: var(--background);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            line-height: 1.6;
            min-height: 100vh;
        }

        .container {
            display: flex;
            max-width: 100%;
            margin: 0;
            padding: 2rem;
            gap: 3rem;
            min-height: calc(100vh - 4rem);
        }

        /* Enhanced main content styling */
        main {
            flex: 1;
            background: var(--card-bg);
            border-radius: 12px;
            padding: 2.5rem;
            box-shadow: 0 8px 30px rgba(0,0,0,0.7);
            overflow-wrap: break-word;
            position: relative;
        }

        /* Typography improvements */
        .markdown-body h1 {
            font-size: 2.8rem;
            margin-bottom: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            border-bottom: 3px solid var(--accent);
            padding-bottom: 0.5rem;
        }

        .markdown-body h2 {
            margin-top: 3rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid var(--accent);
            padding-bottom: 0.25rem;
            color: var(--text-primary);
        }

        .markdown-body h3 {
            margin-top: 2rem;
            margin-bottom: 0.8rem;
            color: var(--text-primary);
        }

        .markdown-body p {
            margin-bottom: 1.2rem;
            color: var(--text-primary);
        }

        /* Enhanced link styling */
        .markdown-body a {
            color: var(--accent);
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .markdown-body a:hover,
        .markdown-body a:focus {
            color: var(--hover-color);
            outline: none;
            text-decoration: underline;
            text-shadow: 0 0 8px rgba(139, 61, 255, 0.3);
        }

        /* Enhanced code block styling */
        .markdown-body pre {
            border-radius: 12px;
            padding: 1.5rem !important;
            font-size: 0.95rem !important;
            overflow-x: auto;
            max-height: 500px;
            box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.4);
            color: #fff;
            border: 1px solid #3d2a5c;
            position: relative;
        }


        .markdown-body code {
            font-family: 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Liberation Mono, Menlo, monospace;
            background: rgba(139, 61, 255, 0.1);
            padding: 0.2em 0.4em;
            border-radius: 4px;
            color: #e6ccff;
            font-size: 0.9em;
        }

        .markdown-body pre code {
            background: transparent;
            padding: 0;
            color: var(--fgColor-default, var(--color-fg-default))
        }
        /* Table styling */
        .markdown-body table {
            border-collapse: collapse;
            width: 100%;
            margin: 2rem 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        .markdown-body table th,
        .markdown-body table td {
            padding: 1rem;
            text-align: left;
            border: 1px solid var(--border-color);
        }

        .markdown-body table th {
            background: var(--accent);
            color: white;
            font-weight: 600;
        }

        .markdown-body table tr:nth-child(even) {
            background: rgba(139, 61, 255, 0.05);
        }

        .markdown-body table tr {
            background-color: transparent;
        }

        /* List styling */
        .markdown-body ul, 
        .markdown-body ol {
            margin-bottom: 1.5rem;
            padding-left: 2rem;
        }

        .markdown-body li {
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        /* Blockquote styling */
        .markdown-body blockquote {
            border-left: 4px solid var(--accent);
            background: rgba(139, 61, 255, 0.1);
            margin: 2rem 0;
            padding: 1rem 1.5rem;
            border-radius: 0 8px 8px 0;
        }

        /* HR styling */
        .markdown-body hr {
            border: none;
            border-top: 2px solid var(--accent);
            margin: 3rem 0;
            opacity: 0.6;
        }

        /* Sticky table of contents */
        nav#toc {
            flex: 0 0 280px;
            position: sticky;
            top: 2rem;
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.7);
            max-height: calc(100vh - 4rem);
            overflow-y: auto;
            font-size: 0.9rem;
            line-height: 1.5;
            border: 1px solid rgba(139, 61, 255, 0.2);
        }

        nav#toc h2 {
            font-size: 1.4rem;
            margin: 0 0 1.5rem 0;
            border-bottom: 2px solid var(--accent);
            padding-bottom: 0.5rem;
            color: var(--text-primary);
        }

        nav#toc ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        nav#toc li {
            margin-bottom: 0.8rem;
        }

        nav#toc a {
            color: var(--text-secondary);
            text-decoration: none;
            display: block;
            padding: 0.3rem 0.5rem;
            border-radius: 6px;
            transition: all 0.3s ease;
        }

        nav#toc a:hover, 
        nav#toc a:focus {
            background: rgba(139, 61, 255, 0.1);
            color: var(--hover-color);
            text-decoration: none;
            transform: translateX(4px);
        }

        /* Responsive design */
        @media (max-width: 1024px) {
            .container {
                flex-direction: column;
                padding: 1rem;
                gap: 2rem;
            }

            nav#toc {
                position: relative;
                max-height: none;
                order: -1;
                flex: none;
            }

            .markdown-body h1 {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0.5rem;
            }

            main {
                padding: 1.5rem;
            }

            .markdown-body h1 {
                font-size: 1.8rem;
            }

            .markdown-body pre {
                padding: 1rem !important;
                font-size: 0.85rem !important;
            }
        }

        /* Accessibility improvements */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Focus indicators */
        *:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* Print styles */
        @media print {
            .container {
                display: block;
            }
            
            nav#toc {
                display: none;
            }
            
            main {
                box-shadow: none;
                background: white;
                color: black;
            }
        }

        /* Loading animation for syntax highlighting */
        .highlight-loading {
            position: relative;
            opacity: 0.7;
        }

        .highlight-loading::after {
            content: 'Loading syntax highlighting...';
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
        }

        /* Translate Button Style */
        #translate-toggle {
            display: block;
            background: var(--accent);
            color: #fff;
            text-align: center;
            padding: 0.5rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            cursor: pointer;
            font-size: 0.9rem;
            border: none;
        }
        #google_translate_element {
            margin-bottom: 1rem;
        }
    </style>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "TechArticle",
      "headline": "GPT4Free Documentation Hub",
      "description": "GPT4Free documentation for GPT4Free Documentation Hub. Complete guides, examples, and API reference for free AI endpoints.",
      "author": {
        "@type": "Organization",
        "@id": "https://g4f.dev/#organization",
        "name": "GPT4Free",
        "url": "https://g4f.dev",
        "logo": {
          "@type": "ImageObject",
          "url": "https://g4f.dev/dist/img/apple-touch-icon.png"
        }
      },
      "publisher": {
        "@type": "Organization",
        "@id": "https://g4f.dev/#organization"
      },
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://g4f.dev/docs/"
      },
      "datePublished": "2024-01-01T00:00:00Z",
      "dateModified": "2024-01-01T00:00:00Z",
      "inLanguage": "en",
      "isAccessibleForFree": true,
      "keywords": "GPT4Free, AI documentation, free AI API, code generation",
      "articleSection": "Documentation"
    }
    </script>
</head>
<body>
    <div class="container">
        <nav id="toc" aria-label="Table of contents" role="navigation">
            <!-- Translation Button -->
            <button id="translate-toggle">🌐 Translate Page</button>
            <div id="google_translate_element" style="display:none;"></div>

            <h2>Contents</h2>
            <ul id="toc-list"></ul>
            <hr style="margin: 1.5rem 0; opacity: 0.3;">
            <ul>
                <li><a href="/docs/" aria-label="Return to documentation home">📚 Documentation Hub</a></li>
                <li><a href="/" aria-label="Return to main site">🏠 G4F Home</a></li>
            </ul>
        </nav>

        <main role="main" class="markdown-body entry-content" itemprop="text" itemscope itemtype="https://schema.org/TechArticle">{{ article }}</main>
    </div>

    <script>
        // Toggle Translation Widget
        document.getElementById("translate-toggle").addEventListener("click", function() {
            const el = document.getElementById("google_translate_element");
            el.style.display = (el.style.display === "none") ? "block" : "none";
        });

        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE
            }, 'google_translate_element');
        }
    </script>
    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

    <script>
        // Enhanced syntax highlighting with error handling
        document.addEventListener('DOMContentLoaded', function() {
            try {
                // Generate table of contents
                generateTableOfContents();
            } catch (error) {
                console.error('Error generating table of contents:', error);
            }
        });

        function generateTableOfContents() {
            const headings = document.querySelectorAll('main h2, main h3');
            const tocList = document.getElementById('toc-list');
            
            if (!tocList || headings.length === 0) return;
            
            tocList.innerHTML = '';
            
            headings.forEach(function(heading, index) {
                const id = heading.id || `heading-${index}`;
                if (!heading.id) {
                    heading.id = id;
                }
                
                const li = document.createElement('li');
                const a = document.createElement('a');
                a.href = `#${id}`;
                a.textContent = heading.textContent;
                a.setAttribute('aria-label', `Jump to ${heading.textContent}`);
                
                if (heading.tagName === 'H3') {
                    li.style.marginLeft = '1rem';
                    li.style.fontSize = '0.9em';
                }
                
                li.appendChild(a);
                tocList.appendChild(li);
        });
        }

        // Smooth scrolling for anchor links
        document.addEventListener('click', function(e) {
            if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('#')) {
                e.preventDefault();
                const target = document.querySelector(e.target.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });

        // Add copy button to code blocks
        document.querySelectorAll('pre code, .highlight pre').forEach(function(block) {
            const button = document.createElement('button');
            button.textContent = 'Copy';
            button.className = 'copy-button';
            button.style.cssText = `
                position: absolute;
                top: 0.5rem;
                right: 0.5rem;
                background: rgba(139, 61, 255, 0.8);
                color: white;
                border: none;
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                cursor: pointer;
                font-size: 0.8rem;
                opacity: 0;
                transition: opacity 0.3s ease;
            `;
            
            const pre = block.parentElement;
            pre.style.position = 'relative';
            pre.appendChild(button);
            
            pre.addEventListener('mouseenter', function() {
                button.style.opacity = '1';
            });
            
            pre.addEventListener('mouseleave', function() {
                button.style.opacity = '0';
            });
            
            button.addEventListener('click', function() {
                navigator.clipboard.writeText(block.textContent).then(function() {
                    button.textContent = 'Copied!';
                    setTimeout(function() {
                        button.textContent = 'Copy';
                    }, 2000);
                });
            });
        });
    </script>
</body>
</html>